<template>

  <div style="width: 90%;height: 70%;left: auto;margin-top:10%;position: relative;text-align: center;">
    <el-form :inline="true" class="demo-form-inline">
      <p>查询身份证号是否参合</p>
      <el-form-item label="身份证号">
        <el-input v-model="joinIdCard" placeholder="身份证号" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加慢性报销对话框 -->
    <el-dialog title="添加慢性报销" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<!--        <el-form-item label="报销记录编码" prop="bxRecordCode">-->
<!--          <el-input v-model="form.bxRecordCode" placeholder="请输入报销记录编码" />-->
<!--        </el-form-item>-->
        <el-form-item label="经办人编码" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入经办人编码" />
        </el-form-item>
        <el-form-item label="疾病编码编码" prop="chronicdisCode">
          <el-select v-model="form.chronicdisCode" style="width: 170px;">
            <el-option
              v-for="item in typeList"
              :key="item.diseaseCode"
              :label="item.diseaseName"
              :value="item.diseaseCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="报销时间" prop="bxTime">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.bxTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择报销时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="总费用" prop="allCost">
          <el-input v-model="form.allCost" placeholder="请输入总费用" />
        </el-form-item>
        <el-form-item label="报销金额" v-show="form.allCost > 0" prop="bxCost">
          <el-input v-model="form.bxCost" disabled placeholder="请输入报销金额" />
        </el-form-item>
        <el-form-item label="就诊时间" prop="visTime">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.visTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择就诊时间">
          </el-date-picker>
        </el-form-item>
        <!--<el-form-item label="报销年份" v-show="false"  prop="year">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.year"
                          type="year"
                          value-format="yyyy"
                          placeholder="请输入报销年份">
          </el-date-picker>
        </el-form-item>-->
        <el-form-item label="发票" prop="receipt">
          <el-input v-model="form.receipt" placeholder="请输入发票" />
        </el-form-item>
        <el-form-item label="就诊机构" prop="visCity">
          <el-input v-model="form.visCity" placeholder="请输入就诊机构" />
        </el-form-item>
        <el-form-item label="区域" prop="areaCode" >
          <el-select v-model="form.areaCode">
            <el-option
              v-for="item in areaList"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

  import { listType} from "@/api/system/type";
  import {getOne} from "../../../api/system/pay";
  import {addRecord } from "@/api/system/record";
  import {getPolicy} from "@/api/system/policy";
  import {listAll } from "@/api/system/area";
    export default {
      data() {
        return {
          // 是否显示弹出层
          open: false,
          // 查询参数
          joinIdCard:"",
          // 行政区域数据
          areaList: [],
          // 慢性病类别数据
          typeList: [],
          // 慢性政策数据
          policy: {},
          // 表单参数
          form: {},
          // 表单校验
          rules: {
            userId: [
              { required: true, message: "经办人编码不能为空", trigger: "blur" }
            ],
            chronicdisCode: [
              { required: true, message: "疾病编码编码不能为空", trigger: "blur" }
            ],
            idCard: [
              { required: true, message: "身份证号不能为空", trigger: "blur" }
            ],
            allCost: [
              { required: true, message: "总费用不能为空", trigger: "blur" }
            ],
            receipt: [
              { required: true, message: "发票不能为空", trigger: "blur" }
            ],
            bxTime: [
              { required: true, message: "报销时间不能为空", trigger: "blur" }
            ],
            visCity: [
              { required: true, message: "就诊机构不能为空", trigger: "blur" }
            ],
            areaCode: [
              { required: true, message: "地区编号不能为空", trigger: "blur" }
            ],
          }
        }
      },
      created(){
        this.getAreaList()
        listType("").then(response => {
          this.typeList = response.rows
        })
      },
      computed:{
        bxTime(){
          this.form.year = this.form.bxTime.substring(0, 4)
          let year = this.form.year
          getPolicy(year).then(res =>{
            this.policy = res.data
          })
        },
        allCost(){
          // console.log("computed---===allCost--->")
          if (this.policy.rate === undefined){
            let year = this.form.year
            if (year === undefined){
              let date = new Date()
              year = date.getFullYear();
            }
            getPolicy(year).then(res =>{
              this.policy = res.data
            })
          }

          this.form.bxCost = this.policy.rate * this.form.allCost

        }

      },
      watch:{
        allCost(value){
          this.policy = {}

          let year = this.form.year
          getPolicy(year).then(res =>{
            this.policy = res.data
          })
          if (value > 0){
            this.bxCost = this.policy.rate * value
          }
        }
      },
      methods: {
        /** 查询行政区域管理列表 */
        getAreaList() {
          listAll(this.queryParams).then(response => {
            this.areaList = response.rows;
          });
        },

        /** 提交按钮 */
        submitForm: function() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              this.form.year = this.form.bxTime.substring(0, 4)
                addRecord(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  } else {
                    this.msgError(response.msg);
                  }
                });
            }
          });
        },
        // 查询是否参合
        query() {
          let joinIdCard = this.joinIdCard
          if (joinIdCard === "" || joinIdCard === null){
            this.$message.error("请输入身份证号")
            return
          }
          getOne(joinIdCard).then(res =>{
            if (res.code === 200){

              this.open = true
            }else {
              this.$message.error(res.msg)
            }
          })

        },
        formatArea(row) {
          let code = row.areaCode
          for (let i = 0; i < this.areaList.length; i++) {
            if (this.areaList[i].areaCode == code) {
              return this.areaList[i].areaName
              break
            }
          }
        },
      }

    }
</script>

<style scoped>

</style>
